<script setup lang="ts">
import { ref } from 'vue'
import { indexConst } from './indexConst'

const indexConstData = indexConst()
const { img, list1, otherBannerUrl, publicityBannerUrl, adBannerUrl, rescue } = indexConstData
const doctor = ref([])
const tab = ref({
  list: [],
  current: 0,
  swipperStyle: '',
})

const toPage = (url: string) => {}
const clickDept = (item: any) => {}
const clickRescue = () => {}
const clickTabHandle = () => {}
</script>

<template>
  <view class="page">
    <u-swiper
      height="230"
      interval="10000"
      :list="list1"
      easingFunction="linear"
      radius="0"
      indicator
    ></u-swiper>
    <view class="top-panel">
      <image :src="img" mode="widthFix" class="icon" @tap="toPage('/registration/notice/notice')" />
      <view class="info">
        <view class="row" @tap="toPage('/registration/notice/notice')">
          <text class="title">预约挂号</text>
          <view class="tag">免排队</view>
          <view class="tag">免挂号单</view>
        </view>
        <view class="row"><view class="link">疫情期间到院就诊指南？</view></view>
      </view>
    </view>
    <view class="navigator-container">
      <view>
        <u-grid :border="false" col="4">
          <u-grid-item>
            <button
              open-type="contact"
              session-from="sessionFrom"
              :plain="true"
              class="btn"
              style="padding: 0"
            >
              <view class="navigator-icon-1"></view>
              <text class="title">导诊问询</text>
              <text class="desc">回答患者咨询</text>
            </button>
          </u-grid-item>
          <u-grid-item>
            <view class="navigator-icon-2"></view>
            <text class="title">找医生</text>
            <text class="desc">查找医院科室</text>
          </u-grid-item>
          <u-grid-item @click="toPage('/registration/notice/notice')">
            <view class="navigator-icon-3"></view>
            <text class="title">线上挂号</text>
            <text class="desc">在线预约挂号</text>
          </u-grid-item>
          <u-grid-item>
            <view class="navigator-icon-4"></view>
            <text class="title">电子处方</text>
            <text class="desc">药物治疗信息</text>
          </u-grid-item>
        </u-grid>
      </view>
    </view>
    <view class="department-container">
      <u-grid :border="false" @click="clickDept" col="5">
        <u-grid-item>
          <view class="department-icon-1" />
          <text class="title">口腔科</text>
        </u-grid-item>
        <u-grid-item>
          <view class="department-icon-2" />
          <text class="title">眼科</text>
        </u-grid-item>
        <u-grid-item>
          <view class="department-icon-3" />
          <text class="title">耳鼻喉</text>
        </u-grid-item>
        <u-grid-item>
          <view class="department-icon-4" />
          <text class="title">内科</text>
        </u-grid-item>
        <u-grid-item>
          <view class="department-icon-5" />
          <text class="title">外科</text>
        </u-grid-item>
        <u-grid-item>
          <view class="department-icon-6" />
          <text class="title">皮肤科</text>
        </u-grid-item>
        <u-grid-item>
          <view class="department-icon-7" />
          <text class="title">妇科</text>
        </u-grid-item>
        <u-grid-item>
          <view class="department-icon-8" />
          <text class="title">儿科</text>
        </u-grid-item>
        <u-grid-item>
          <view class="department-icon-9" />
          <text class="title">神经科</text>
        </u-grid-item>
        <u-grid-item>
          <view class="department-icon-10" />
          <text class="title">更多</text>
        </u-grid-item>
      </u-grid>
      <image :src="otherBannerUrl" mode="widthFix" class="banner"></image>
    </view>
    <view class="publicity-container"
      ><image :src="publicityBannerUrl" mode="widthFix" class="banner"
    /></view>
    <view class="doctor-container">
      <view class="title-row">
        <text class="title">名医专家</text>
        <u-icon label="更多" labelPos="left" size="15" name="arrow-right"></u-icon>
      </view>
      <u-tabs :list="tab.list" @click="clickTabHandle"></u-tabs>
      <view class="panel">
        <view class="doctor" v-for="one in doctor" :key="one.id">
          <u-avatar :src="one.photo" size="45"></u-avatar>
          <view class="info">
            <view class="row">
              <text class="name">{{ one.name }}</text>
              <text class="job">{{ one.job }}</text>
              <button class="btn">挂号</button>
            </view>
            <view class="row">
              <text class="remark">{{ one.remark }}</text>
            </view>
            <view class="row">
              <rich-text class="desc">{{ one.description }}</rich-text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="ad-container"><image :src="adBannerUrl" mode="widthFix" class="banner" /></view>
    <view class="rescue-container">
      <view class="title-row">
        <text class="title">必备急救宝典</text>
        <u-icon label="更多" labelPos="left" size="15" name="arrow-right"></u-icon>
      </view>
      <u-grid :border="false" @click="clickRescue" col="3">
        <u-grid-item><image :src="rescue[0]" mode="widthFix" class="pic"></image></u-grid-item>
        <u-grid-item><image :src="rescue[1]" mode="widthFix" class="pic"></image></u-grid-item>
        <u-grid-item><image :src="rescue[2]" mode="widthFix" class="pic"></image></u-grid-item>
        <u-grid-item><image :src="rescue[3]" mode="widthFix" class="pic"></image></u-grid-item>
        <u-grid-item><image :src="rescue[4]" mode="widthFix" class="pic"></image></u-grid-item>
        <u-grid-item><image :src="rescue[5]" mode="widthFix" class="pic"></image></u-grid-item>
      </u-grid>
    </view>
  </view>
</template>

<style lang="less">
@import url(index.less);
</style>
